<template>
  <div id="task-list">
    <!-- TODO: 任务列表组件 -->
    <!-- 
      ======================================
      五、任务一：
        创建一个组件，并在组件中加一个展示文字，然后在App.vue中引入，查看效果
      六、任务二：
        在新建的这个组件中实现任务计划表功能
     -->
    <div class="control">
      <input class="input" v-model="inputContent" />
      <button class="btn" @click="addTaskContent">添加</button>
    </div>
    <div class="item-list">
      <ul>
        <li class="item" v-for="item in taskList" :key="item">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  data() {
    return {
      inputContent: "",
      taskList: [],
    };
  },
  methods: {
    addTaskContent: function () {
      this.taskList.push(this.inputContent);
    },
  },
};
</script>

<style>
#task-list {
  width: 30%;
  margin: 0px auto;
  background-color: #64b587;
}
.control {
  display: flex;
  justify-content: center;
}

.input {
  height: 50px;
  margin: 10px;
  border: #64b587 1px solid;
  border-radius: 10px;
}
.btn {
  height: 50px;
  width: 100px;
  margin: 10px;
  border: #035828 3px solid;
  background-color: #009742;
  border-radius: 10px;
}
.btn:hover {
  background-color: #439968;
}
.btn:active {
  background-color: green;
}
.item-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item {
  color: white;
}
</style>